<template>
  <div class="tableInfo">
   <!-- 是element 的表格和分页组件结合 -->
   	<el-row>
			<el-col :span="24">
					<el-table :data="tableData" :row-style="selectedHighlight" @selection-change="handleSelectionChange" stripe id="allCustomer">
						<!-- <el-table-column v-show="isSelection" type="selection" width="30" fixed></el-table-column> -->
            <!-- <el-table-column label="编号" fixed></el-table-column> -->
            <el-table-column v-for="(column,index) in columns"
              v-show="column.isShow"
              :key="index"
              :prop="column.prop"
              :label="column.label"
              :fixed="column.fixed"
              :width="column.width"
              align="center"
            >
            </el-table-column>
						<el-table-column
              v-if="isHide"
              fixed="right"
              label="操作"
              :width="rightW"
            >
						<template slot-scope="scope">
							<div class="tableBtn">
								<button @click="see(scope.row)" class="checkBtn" v-if="isShowSee">查看</button>
								<button class="editBtn"  @click="edit(scope.row)" v-if="isShowEdit">编辑</button>
                <!-- <button @click.native.prevent="deleteRow(scope.$index)" type="text">移除</button> -->
                <button class="deleteBtn" @click="deleteBtn(scope.row)" v-if="isShowDel">删除</button>
								<button class="returnVisitBtn" @click="returnVisit(scope.row)" v-if="scope.row.isBtnShow">回访</button>
								<button class="bookBtn" @click ="appointment(scope.row)" v-if="scope.row.isBtnShow">转预约</button>
							</div>
						</template>
						</el-table-column>
					</el-table>
			</el-col>
		</el-row>
		<!--分页-->
		<el-row class="pagination-cont">
        <el-pagination
          @size-change="handleSizeChange"
          background
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
					:pager-count="5"
          layout="sizes, prev, pager, next, jumper, slot"
          :total="total"
        >
          <div class="pagination-slot">
              显示
              <p class="slot-i">{{num1}}</p>
              到
              <p class="slot-i">{{num2}}</p>
              ，共
              <p class="slot-i">{{total}}</p>
              记录
            </div>
        </el-pagination>
	  </el-row>
  </div>
</template>

<script>
import datas from '@/containers/crm/customerManagement/customerList/datas.js'
export default {
  name:'tableCom',
  props: {
    total:{ //总条数
      type:Number,
      default:1
    },
    pageSize:{ //每页数量
      type:Number,
      default:10
    },
    pageNum:{ //当前页码
      type:Number,
      default:1
    },
    pageTotal:{
      type:Number,
      default:1
    },
    isShowSee:{
      type: Boolean,
      default: true
    },
    isShowEdit:{ //是否显示编辑按钮
      type: Boolean,
      default: false
    },
    isShowDel:{ //是否显示删除按钮
      type: Boolean,
      default: false
    },
    // 表格数据
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    },
    isSelection:{
      type: Boolean,
      default: false
    },
    // 相应的字段展示
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    currentPage4: { //当前页
      type: Number,
      default: 1
    },
    fixed:{
      type: Boolean,
       default: false
    },
    isHide:{
      type: Boolean,
      default: true
    },
    rightW:{
      type: Number,
      default: 100
    }
  },
  data () {
    return {
        num1:0,
        num2:0
    }
  },
  created(){
    this.paginationFn();
  },
  watch:{
      total:{
        handler(newVal,oldVal){
          this.paginationFn();
        },
        deep:true
      },
      pageNum:{
        handler(newVal,oldVal){
          this.paginationFn();
        },
        deep:true
      },
      pageSize:{
        handler(newValue,oldValue){
          this.paginationFn();
        },
        deep:true
      },
      pageTotal:{
        handler(newValue,oldValue){
          this.paginationFn();
        },
        deep:true
      },
      num1:{
        handler(newValue,oldValue){
          this.paginationFn();
        },
        deep:true
      },
      num2:{
        handler(newValue,oldValue){
          this.paginationFn();
        },
        deep:true
      },
    },
  methods: {
    //组装分页
    paginationFn() {
      if(this.pageNum == 0){
         this.num1 = 0
      }else{
        this.num1 = (this.pageNum-1)*this.pageSize+1
      }

      if(this.pageTotal == this.pageNum){
        this.num2 = this.total;
      }else{
        this.num2 = this.pageNum*this.pageSize;
      }
    },
    selectedHighlight () {
      this.$emit('handleSelectionChange')
    },
    handleSelectionChange () {
      this.$emit('handleSelectionChange')
    },
    handleSizeChange (val) {
      this.$emit('handleSizeChange',val)
    },
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange',val)
    },
    see(param){ // 查看
      this.$emit('see',param)
    },
    edit(param){ //编辑
      this.$emit('edit',param)
    },
    deleteBtn(param){
      this.$emit('deleteBtn',param)
    },
    returnVisit(param){ //回访
      this.$emit('returnVisit',param)
    },
    appointment(param){ // 转预约
      this.$emit('appointment',param)
    },
    deleteRow(param) {
        //rows.splice(index, 1);
        this.$emit('deleteRow',param)
      }

  },
  components: {

  },
}
</script>

<style scoped>
  .pagination-cont{
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }
  .tableBtn{
		display: flex;
		justify-content: center
	}
	.tableBtn button{
		height: 24px;
		width: 58px;
		border-radius: 12px;
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		cursor: pointer;
		margin-right: 8px;
		border: 0;
		outline:none;
    color: #7e6b5a;
    border: 1px #7e6b5a solid;
    background: #fff
	}
	.tableBtn button:last-child{
		margin-right: 0;
	}

</style>
